<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style>
            .card{
                width: 300px;
                background-color: #e8e8e8;
                padding: 10px;/*内间距：四个方向都是10px*/
                margin-bottom: 30px;/*下外边距*/
            }
            img{
                width: 100%/*图片的大小为父元素的100%*/
            }
            p{
                border: 5px solid red;
                /*外间距：上10px 右20px 下30px 左40px*/
                margin: 10px 20px 30px 40px;
            }
        </style>
    </head>

    <body>
        <div class="card">
            <img src="img/1.png">
            <p>我是文字</p>
        </div>
        <div class="card">
            <img src="img/1.png">
            <p>我是文字</p>
        </div>


    </body>
</html>